<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="easyui-panel" title=""  data-options="border:true">
    <!-----------------列表 ----------------------------->
    <!-- 页面上每一个属性名都和javaBean的属性名一模一样 -->
    <table id="spulist_dg" class="easyui-datagrid" title="spu列表"
           data-options="singleSelect:true,method:'get' ,toolbar:'#spulist_tb'">
        <thead>
        <tr>
            <th data-options="field:'id'" width="10%">商品id </th>
            <th data-options="field:'spuName'" width="30%">商品名称</th>
            <th data-options="field:'description'" width="60%">商品描述 </th>
        </tr>
        </thead>
    </table>
    <!-----------------列表的工具栏----------------------------->
    <div id="spulist_tb" style="padding:5px;height:auto">
        <div style="margin-bottom:5px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="popAddSpuInfoModal()">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="popAddSkuModal()">增加sku</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="popListSkuModal()"> sku列表</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true"> SPU商品上架</a>
        </div>
        <div>
            <!--三级联动效果-->
            一级分类：
            <select id="ctg1ForSpuList"  class="easyui-combobox"  style="width:100px"
                    data-options="valueField:'id',textField:'name',url:'basecatalog/1/list.json',
                 onSelect:function(rec){
                     //刷新二级分类的内容
                    $('#ctg2ForSpuList').combobox('reload','basecatalog/2/list.json?id='+rec.id);
                    //清空下级内容
                    $('#ctg2ForSpuList').combobox('clear');
                    $('#ctg3ForSpuList').combobox('clear');
                 }"></select>
            二级分类：
            <select id="ctg2ForSpuList" name="ctg2ForSpuList"   class="easyui-combobox" style="width:100px"
                    data-options="valueField:'id',textField:'name',onSelect:function(rec){
                //刷新三级分类的内容
                 //清空下级内容
                $('#ctg3ForSpuList').combobox('clear');
                $('#ctg3ForSpuList').combobox('reload','basecatalog/3/list.json?id='+rec.id);
            }"></select>
            三级分类：
            <select name="ctg3ForSpuList" id="ctg3ForSpuList" class="easyui-combobox"  style="width:100px"
                    data-options="valueField:'id',textField:'name',onSelect:function(rec){
                    //查询三级分类下对应的商品信息
                    refreshSpuListTable(rec.id);
                }"></select>
            <a href="#" onclick="refreshSpuListTable()" class="easyui-linkbutton" iconCls="icon-search">刷新属性列表</a>
        </div>
    </div>
</div>

<!--引入spu信息输入框页面-->
<div th:include="spu/spuInfoPage"></div>
<!--引入sku信息输入框页面-->
<div th:include="sku/skuInfoPage"></div>
<!--引入sku列表页面-->
<div th:include="sku/skuListPage"></div>
</body>
<script language="javascript">
    /*<![CDATA[*/
    //显示平台属性选项
    function renderBaseAttr() {
        /* <label class="infoGroupLabel">
                <label>篇幅</label>
                <select>
                    <option value="1">长篇</option>
                    <option>短片</option>
                </select>
            </label>
          */
        var c3id = getSpuCatalog3Info().id;
        $.get('sku/base_attr_info.json?id='+c3id,function (data) {
            $("#attrInfoGroup").empty();
            $.each(data,function () {
                var bigLabel = $("<label class='infoGroupLabel'></label>");
                bigLabel.append("<label attrId='"+this.id+"'>"+this.attrName+"</label>")
                var selectEL = $("<select></select>");
                $.each(this.attrValues,function () {
                    var optionEl = $("<option value='"+this.id+"'>"+this.valueName+"</option>")
                    selectEL.append(optionEl);
                });
                bigLabel.append(selectEL);
                $("#attrInfoGroup").append(bigLabel).append(" ");
            })

        });


    }
    //显示销售属性选项
    function renderSaleAttr() {
        var spuId = getSelectedSpuInfoRow().id;
        $.get('sku/spu_sale_attr.json?id='+spuId,function (data) {
            //遍历放元素之前清空
            $("#spuSaleAttrGroup").empty();
            $.each(data,function () {
                var bigLabel = $("<label class='attrValueGroupLabel'></label>");
                bigLabel.append("<label attrId='"+this.id+"'>"+this.saleAttrName+"</label>")
                var selectEL = $("<select></select>");
                $.each(this.saleAttrValues,function () {
                    var optionEl = $("<option value='"+this.id+"'>"+this.saleAttrValueName+"</option>")
                    selectEL.append(optionEl);
                });
                bigLabel.append(selectEL);
                $("#spuSaleAttrGroup").append(bigLabel);
            })

        });

    }

    //3、显示spuImage信息
    function renderSpuImagesTable() {
        $("#skuImgDg").datagrid({
            url:'sku/spuImgaes?id='+getSelectedSpuInfoRow().id
        })
    }
    //弹出增加sku的modal
    function popAddSkuModal() {
           var spuInfo = getSelectedSpuInfoRow();
           if(spuInfo == null){
               $.messager.alert("警告","请先选择一个spu才能为他增加sku的信息")
           }else{
               $("#sku_dlg").dialog('open');
               //1、显示平台属性
               renderBaseAttr();
               //2、显示销售属性
               renderSaleAttr();
               //3、显示spuImage信息
               renderSpuImagesTable();
           }
       }

    //弹出spu下对应的所有sku列表信息
    function popListSkuModal() {
        var spuInfo = getSelectedSpuInfoRow();
        if(spuInfo == null){
            $.messager.alert("警告","请先选择一个spu才能为他增加sku的信息")
        }else{
            $("#skulist_dlg").dialog('open');
            //给表格里面搞数据
            $("#skulist_dg").datagrid({
                url:'sku/skuinfo?id='+getSelectedSpuInfoRow().id
            })
        }
    }

    //刷新spu商品信息列表
    function refreshSpuListTable(id) {
        var c3id = null;
        if(id != null){
            c3id = id;
        }else{
            c3id = getSpuCatalog3Info().id
        }

        //获取数据，刷新到表格中
        $("#spulist_dg").datagrid({
            url:'spu/info.json?catalog3Id='+c3id
        })
    }

    //打开spu信息编辑弹出框
    function popAddSpuInfoModal() {
        if(getSpuCatalog3Info()!=null){
            $("#spu_dlg").dialog('open');
        }else{
            $.messager.alert('警告','请先选择三级分类');
        };
    }

    //获取三级分类的信息
    function getSpuCatalog3Info(){
        var id = $("#ctg3ForSpuList").combobox("getValue");
        var text = $("#ctg3ForSpuList").combobox("getText");
        var info = {id:id,name:text};
        if(id == ""){
            return null;
        }
        return info;
    }

    //获取选中的spu信息
    function getSelectedSpuInfoRow() {
        return $("#spulist_dg").datagrid('getSelected')
    }

    /*]]>*/
</script>
</html>